The most obvious reason to use the WebBrowser control is to display web content within the page of a Windows Phone 7 application. For instance, you may be developing an application that shows Twitter feeds in a portion of the screen. The easiest way to do this would be to create a WebBrowser control in the application and navigate to a given Twitter page from within that control.
This article is going to explain how to use WebBrowser control in Windows 7 phone development. Let’s see a brief demonstration on it.
Getting started:
1. Open Visual Studio
2. Create new Silverlight Windows 7 Phone Development Project
3. Enter your project Name
4. Click on button ‘Ok’
Now drag and drop WebBrowser control in ‘MainPage.xaml’ design interface and set some properties of WebBrowser control.
Now write down the following to code to build up above layout.
Code of MainPage.xaml:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="My Application" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="WebBrowser Demo" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="40" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser HorizontalAlignment="Left" Margin="0,74,0,0" Name="webBrowser1" VerticalAlignment="Top" Background="#FF64E5E5" DataContext="{Binding}" Height="603" Width="456" AllowDrop="False" />
<Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="348,6,0,0" Name="btnGo" VerticalAlignment="Top" Width="102" FontSize="22" Click="btnGo_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="6,6,0,0" Name="txtSearch" Text="" VerticalAlignment="Top" Width="336" />
</Grid>
</Grid>
Code of MainPage.xaml.cs:
using System;
using System.Windows;
using Microsoft.Phone.Controls;
namespace webBrowserDemo
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void btnGo_Click(objectsender, RoutedEventArgse)
{
string strUri=txtSearch.Text;
webBrowser1.Source=new Uri(strUri, UriKind.Absolute);
webBrowser1.Visibility=System.Windows.Visibility.Visible;
}
}
}
Now execute your application; following output will be appearing.
Now click on button ‘Ok’.
This is the complete description of WebBrowser control in windows phone development. I hope you will enjoy it. Thanks for reading this article.
Leave Comment